<template>
  <div class="min-h-screen bg-gray-50">
    <div class="container mx-auto px-4 py-8">
      <!-- 页面标题 -->
      <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">电子书</h1>
        <p class="text-gray-600">丰富的算法和编程电子书资源</p>
      </div>

      <!-- 分类导航 -->
      <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <div class="flex flex-wrap gap-4">
          <button
            v-for="category in categories"
            :key="category.id"
            :class="[
              'px-4 py-2 rounded-lg font-medium transition-colors',
              selectedCategory === category.id
                ? 'bg-blue-600 text-white'
                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
            ]"
            @click="selectedCategory = category.id"
          >
            {{ category.name }}
          </button>
        </div>
      </div>

      <!-- 电子书列表 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div
          v-for="ebook in filteredEbooks"
          :key="ebook.id"
          class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
        >
          <!-- 电子书封面 -->
          <div class="h-64 bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
            <div class="text-white text-center">
              <svg class="w-16 h-16 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
              </svg>
              <span class="text-sm font-medium">{{ ebook.format }}</span>
            </div>
          </div>

          <!-- 电子书信息 -->
          <div class="p-6">
            <div class="flex items-center justify-between mb-2">
              <span
                :class="[
                  'px-2 py-1 rounded text-xs font-semibold',
                  ebook.category === 'algorithm' ? 'bg-blue-100 text-blue-800' :
                  ebook.category === 'data-structure' ? 'bg-green-100 text-green-800' :
                  ebook.category === 'programming' ? 'bg-purple-100 text-purple-800' :
                  'bg-gray-100 text-gray-800'
                ]"
              >
                {{ getCategoryName(ebook.category) }}
              </span>
              <span class="text-sm text-gray-500">{{ ebook.pages }} 页</span>
            </div>

            <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ ebook.title }}</h3>
            <p class="text-gray-600 text-sm mb-3">{{ ebook.description }}</p>

            <div class="flex items-center justify-between text-sm text-gray-500 mb-4">
              <span>{{ ebook.author }}</span>
              <span>{{ ebook.year }}</span>
            </div>

            <div class="flex items-center justify-between">
              <div class="flex items-center text-sm text-gray-500">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                </svg>
                {{ ebook.downloads }} 次下载
              </div>
              <button
                class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors text-sm"
                @click="downloadEbook(ebook)"
              >
                下载
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="filteredEbooks.length === 0" class="text-center py-12">
        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
        </svg>
        <h3 class="mt-2 text-sm font-medium text-gray-900">暂无电子书</h3>
        <p class="mt-1 text-sm text-gray-500">该分类下暂时没有电子书</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 响应式数据
const selectedCategory = ref('all')

const categories = [
  { id: 'all', name: '全部' },
  { id: 'algorithm', name: '算法' },
  { id: 'data-structure', name: '数据结构' },
  { id: 'programming', name: '编程语言' },
  { id: 'system', name: '系统设计' }
]

// 模拟电子书数据
const ebooks = ref([
  {
    id: 1,
    title: '算法导论',
    description: '计算机科学领域的经典教材，深入讲解各种算法和数据结构',
    author: 'Thomas H. Cormen',
    year: '2022',
    pages: 1312,
    format: 'PDF',
    category: 'algorithm',
    downloads: 1250
  },
  {
    id: 2,
    title: '编程珠玑',
    description: '编程技巧和算法思维的经典之作',
    author: 'Jon Bentley',
    year: '2021',
    pages: 256,
    format: 'PDF',
    category: 'algorithm',
    downloads: 890
  },
  {
    id: 3,
    title: '数据结构与算法分析',
    description: 'C语言描述的数据结构与算法分析教材',
    author: 'Mark Allen Weiss',
    year: '2023',
    pages: 512,
    format: 'PDF',
    category: 'data-structure',
    downloads: 650
  },
  {
    id: 4,
    title: 'JavaScript高级程序设计',
    description: '深入理解JavaScript语言特性和最佳实践',
    author: 'Nicholas C. Zakas',
    year: '2022',
    pages: 1024,
    format: 'PDF',
    category: 'programming',
    downloads: 2100
  },
  {
    id: 5,
    title: '设计数据密集型应用',
    description: '构建可靠、可扩展和可维护的分布式系统',
    author: 'Martin Kleppmann',
    year: '2021',
    pages: 616,
    format: 'PDF',
    category: 'system',
    downloads: 780
  },
  {
    id: 6,
    title: 'Python编程：从入门到实践',
    description: 'Python编程的入门教程，适合初学者',
    author: 'Eric Matthes',
    year: '2023',
    pages: 544,
    format: 'PDF',
    category: 'programming',
    downloads: 1500
  }
])

// 计算属性
const filteredEbooks = computed(() => {
  if (selectedCategory.value === 'all') {
    return ebooks.value
  }
  return ebooks.value.filter(e => e.category === selectedCategory.value)
})

// 方法
const getCategoryName = (category: string) => {
  const categoryMap: { [key: string]: string } = {
    algorithm: '算法',
    'data-structure': '数据结构',
    programming: '编程语言',
    system: '系统设计'
  }
  return categoryMap[category] || category
}

const downloadEbook = (ebook: any) => {
  console.log('下载电子书:', ebook)
  // 这里可以实现下载功能
}

onMounted(async () => {
  const userId = route.params.id
  try {
    // 这里加载电子书数据
    console.log('加载电子书数据:', userId)
  } catch (error) {
    console.error('加载电子书数据失败:', error)
  }
})
</script>
